<template>
    <div style="display: flex;align-items: center;width: 100%;">
        <div v-if="cardPage != 1">
            <img src="../../assets/images/lrow.svg" class="rowImg" @click="cardPage = cardPage - 1">
        </div>
        <div v-if="card && card.length > 0" class="cardDom">

            <div class="toppingCard" @mouseenter="bottomShow = true; bottomShowIndex = index" v-for="(item, index) in card"
                v-bind:key="item" @mouseleave="bottomShow = false;">
                <div class="t3">
                    <div class="t4">{{ item.realName }}</div>
                    <div class="t4">{{ item.createTime }}</div>
                </div>
                <div class="t1">
                    <div class="content">
                        <span class="t5" v-show="item.top == '1'">[{{ $t('text.Common.l17') }}]</span>
                        <CommonOmit :text="item.content == null ? '-' : item.content" :length="5"></CommonOmit>
                    </div>
                    <div style="position: relative;" v-if="item.imagePath != null && item.imagePath != ''">
                        <CommonImage class="i1" :src="item.imagePath == null ? '' : item.imagePath.split(',')[0]"
                            :list="item.imagePath == null ? [] : item.imagePath.split(',')" />
                        <span class="mask">{{ item.imagePath != null ? item.imagePath.split(",").length
                            <= 1 ? '' : '+' + item.imagePath.split(",").length : '' }}</span>
                    </div>
                </div>

                <div class="t6" v-show="bottomShow && bottomShowIndex == index">
                    <div class="t7" @click="topClick(item, index)">{{ item.top == '1' ? $t('text.House.l285') :
                        $t('text.House.l123') }}</div>
                    <DialogLayout34 :id="item.id" :index="index" @returnData="deleteCard">
                        <div class="t8">{{ $t('text.DialogLayout.l219') }}</div>
                    </DialogLayout34>
                </div>

            </div>

            <div v-for="item of 5 - card.length" v-bind:key="item" style="margin-left: 20px;flex: 1;">
            </div>
        </div>
        <div v-else style="text-align: center;padding: 10px;width: inherit;color: #a6a6a6;font-size: 15px;">{{
            $t("text.Common.l23") }}</div>
        <div v-if="card.length % 5 == 0 && card.length != 0">
            <img src="../../assets/images/rrow.svg" class="rowImg" @click="cardPage = cardPage + 1">
        </div>
    </div>
</template>
    
<script>
import { changeTop, findPageByHouseId, findPageByCustomerId } from "../../http/api"
import { ElMessage } from "element-plus"
import DialogLayout34 from "../dialogLayout/DialogLayout34.vue"
import CommonImage from "../input/CommonImage.vue"
export default {
    name: "ToppingCard",
    components: {
        DialogLayout34,
        CommonImage,
    },
    props: {
        isCustomer: Boolean,
        cardLoad: Boolean,
    },
    data() {
        return {
            bottomShow: false,
            bottomShowIndex: 0,
            card: [],
            cardPage: 1,
        }
    },
    mounted() {
        if (this.isCustomer) {
            this.getCard2()
        } else {
            this.getCard1()
        }
    },
    methods: {
        getCard1() {
            findPageByHouseId({ houseId: this.$route.query.id, pageNo: this.cardPage, pageSize: 5 })
                .then((res) => {
                    if (res !== undefined) {
                        this.card = res.dataList
                        console.log(res)
                    }
                })
                .catch()
        },
        getCard2() {
            findPageByCustomerId({ customerId: this.$route.query.id, pageNo: this.cardPage, pageSize: 5 })
                .then((res) => {
                    if (res !== undefined) {
                        this.card = res.dataList
                        console.log(res)
                    }
                })
                .catch()
        },

        topClick(item, index) {
            if (item.id != null) {
                console.log(item.top)
                changeTop({
                    id: item.id,
                    top: item.top == "1" ? "0" : "1",
                    refId: this.$route.query.id,
                    moduleType: this.isCustomer ? "客源" : "房源",
                })
                    .then((res) => {
                        if (res !== undefined) {
                            ElMessage.success({
                                showClose: true,
                                message: this.$t("text.Common.l11"),
                                type: "success",
                            })
                            this.card[index].top = item.top == "1" ? "0" : "1"
                        }
                    })
                    .catch()
            } else {
                ElMessage.error({
                    showClose: true,
                    message: "无参数，请从 管理界面跳转",
                    type: "error",
                })
            }
        },
        deleteCard(index) {
            this.card.splice(index, 1)
        },
        cardClick(index) {
            this.bottomShow = !this.bottomShow
            this.bottomShowIndex = index
        },
    },
    watch: {
        cardPage() {
            if (this.isCustomer) {
                this.getCard2()
            } else {
                this.getCard1()
            }
        },
        cardLoad() {
            console.log("aa")
            if (this.isCustomer) {
                this.getCard2()
            } else {
                this.getCard1()
            }
        },
    },
    computed: {},
}
</script>
    
<style scoped>
.rowImg {
    width: 25px;
    height: 25px;
}

.content {
    min-width: 50px;

}

.cardDom {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    overflow: hidden;
    height: 210px;
}

.toppingCard {
    flex: 1;
    height: 145px;
    border-radius: 10.5px;
    transition: unset;
    padding: 10px;
    position: relative;
    word-wrap: break-word;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 1px 1px 8px 3px #e5e5e5;
}

.toppingCard:first-child {
    margin-left: 20px;
}

.toppingCard:last-child {
    margin-right: 20px;
}

.toppingCard:hover {
    background: linear-gradient(#e0eafd, #f8f6f6, #fdfdfd);
}

.t1 {
    font-size: 12px;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 15px;
}

.t5 {
    color: #6698ff;
    white-space: nowrap;
}

.i1 {
    width: 90px;
    height: 70px;
}

.t3 {
    display: flex;
    font-size: 13px;
    color: #999;
    bottom: 5px;
    align-items: center;
    line-height: 20px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.t4 {
    flex: 1;
    text-align: left;
    word-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.el-rate.is-disabled .el-rate__item {
    color: gray;
}

.t6 {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 8px;
}

.t7 {
    color: #6698ff;
    font-size: 13px;
    padding-top: 5px;
    padding-right: 30px;
}

.t8 {
    color: #fd6855;
    font-size: 13px;
    padding-top: 5px;
}

.mask {
    position: absolute;
    left: 40%;
    top: 30%;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: auto 0;
}</style>